<template>
  <div>
    <el-dialog id="details" v-loading="listLoading" ::modal="modal" :append-to-body="true" :visible="true" class="add_case_dialog" width="90%" :before-close="callOf">
      <el-form ref="form" :model="sizeForm" label-width="100px" disabled>
        <el-row :gutter="5">
          <el-col :span="14">
            <el-row :gutter="10" style="margin-top: 10px">
              <el-col :span="4">
                <el-form-item label="关联">
                  <el-switch v-model="sizeForm.relation" style="margin-right:20px" disabled active-color="#13ce66" />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="是否上线">
                  <el-switch
                    v-model="sizeForm.project_info.online.online_status"
                    style="margin-right:20px"
                    active-color="#13ce66"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="3">
                <el-form-item label="是否按时上线">
                  <el-switch
                    v-model="sizeForm.project_info.online.onlineanshi"
                    style="margin-right:20px"
                    active-color="#13ce66"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="3">
                <el-form-item>
                  <el-tag v-if="sizeForm.project_info.status == '测试中'" effect="plain" :type="'success'" disable-transitions>测试中</el-tag>
                  <el-tag v-else-if="sizeForm.project_info.status == '测试完成'" effect="plain" :type="'info'">测试完成</el-tag>
                  <el-tag v-else-if="sizeForm.project_info.status == '已上线'" effect="plain" :type="'danger'">已上线</el-tag>
                </el-form-item>
              </el-col>
              <el-col :span="3">
                <el-form-item>
                  <el-tag v-if="sizeForm.project_info.demand_type == '标准需求'" effect="plain" :type="'primary'" disable-transitions>标准需求</el-tag>
                  <el-tag v-else-if="sizeForm.project_info.demand_type == '验收需求'" effect="plain" :type="'success'">验收需求</el-tag>
                  <el-tag v-else-if="sizeForm.project_info.demand_type == '生产事故'" effect="plain" :type="'danger'">生产事故</el-tag>
                  <el-tag v-else-if="sizeForm.project_info.demand_type == '线上bug'" effect="plain" :type="'warning'">线上bug</el-tag>
                  <el-tag v-else-if="sizeForm.project_info.demand_type == '紧急发版'" effect="plain" :type="'info'">紧急发版</el-tag>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="10">
              <el-col :span="24">
                <el-form-item label="实验室：">
                  <span class="info_span">{{ sizeForm.pro_data.v_group }}</span> -
                  <span class="info_span">{{ sizeForm.pro_data.v_project }}</span> -
                  <span class="info_span">{{ sizeForm.pro_data.v_version }}</span>
                  <!--                  <el-select-->
                  <!--                    v-model="sizeForm.pro_data.v_group"-->
                  <!--                    clearable-->
                  <!--                    placeholder="业务"-->
                  <!--                    @change="getAllinfo(['v_project','m_project'])"-->
                  <!--                  />-->
                  <!--                  <el-select-->
                  <!--                    v-model="sizeForm.pro_data.v_project"-->
                  <!--                    style="margin-left: 20px"-->
                  <!--                    clearable-->
                  <!--                    placeholder="项目"-->
                  <!--                    @change="getAllinfo(['v_version','m_project','m_version'])"-->
                  <!--                  />-->
                  <!--                  <el-select-->
                  <!--                    v-model="sizeForm.pro_data.v_version"-->
                  <!--                    style="margin-left: 20px"-->
                  <!--                    filterable-->
                  <!--                    allow-create-->
                  <!--                    clearable-->
                  <!--                    placeholder="版本"-->
                  <!--                    @change="getAllinfo(['v_version'])"-->
                  <!--                  />-->
                </el-form-item>
                <el-form-item label="Mantis：">
                  <span class="info_span">{{ sizeForm.pro_data.m_group }}</span> -
                  <span class="info_span">{{ sizeForm.pro_data.m_project }}</span> -
                  <span class="info_span">{{ sizeForm.pro_data.m_version }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="10">
              <el-col :span="8">
                <el-form-item label="上线时间">
                  <span class="info_span">{{ sizeForm.project_info.online_time | parseTime("{y}-{m}-{d}") }}</span>
                  <!--                  <el-date-picker v-model="sizeForm.project_info.online_time" type="date" placeholder="选择日期" />-->
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="上线次数">
                  <span class="info_span">{{ sizeForm.project_info.online.online_count }}</span>
                  <!--                  <el-input v-model="sizeForm.project_info.online.online_count" class="buginput" placeholder="" />-->
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="回滚/追加次数">
                  <span class="info_span">{{ sizeForm.project_info.online.back }}</span>
                  <!--                  <el-input v-model="sizeForm.project_info.online.back" class="buginput" placeholder="" />-->
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="10">
            <el-row :gutter="10">
              <el-col :span="24">
                <div class="mark">
                  <span style="font-size:15px;font-weight:bold;margin-left:10px" class="mark-item">质量数据</span>
                </div>
              </el-col>
              <el-row :gutter="10">
                <el-col :span="6">
                  <el-form-item label="bug率">
                    <span class="info_span">{{ sizeForm.quality_data.bugrate }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="修复率">
                    <span class="info_span">{{ sizeForm.quality_data.fixrate }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="无效修改率">
                    <span class="info_span">{{ sizeForm.quality_data.unfixrate }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="bug密度">
                    <span class="info_span">{{ sizeForm.quality_data.bugdensity }}</span>
                  </el-form-item>
                </el-col>

              </el-row>
              <el-row :gutter="10">
                <el-col :span="8">
                  <el-form-item label="发布成功率">
                    <span class="info_span">{{ sizeForm.quality_data.onlinerate }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="需求变更次数">
                    <span class="info_span">{{ sizeForm.quality_data.dmchange }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="需求问题统计">
                    <span class="info_span">{{ sizeForm.quality_data.dmcount }}</span>
                  </el-form-item>
                </el-col>

              </el-row>
            </el-row>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="15">

            <el-row :gutter="10">
              <el-col :span="24">
                <div class="mark">
                  <span style="font-size:15px;font-weight:bold;margin-left:10px" class="mark-item">项目数据</span>
                </div>
              </el-col>
            </el-row>

            <el-row :gutter="10">
              <el-col :span="8">
                <el-form-item label="开始时间" required>
                  <span class="info_span">{{ sizeForm.project_info.start_time | parseTime("{y}-{m}-{d}") }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="结束时间">
                  <span class="info_span">{{ sizeForm.project_info.end_time | parseTime("{y}-{m}-{d}") }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="研发工时">
                  <span class="info_span">{{ sizeForm.project_info.dev_time }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="4 ">
                <el-form-item label="检查点数量">
                  <span class="info_span">{{ sizeForm.project_info.cheack }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="10">
              <el-col :span="4">
                <el-form-item label="提测次数">
                  <span class="info_span">{{ sizeForm.project_info.tice }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <!-- <el-form-item label="是否按时准入">
                  <span class="info_span">{{ sizeForm.project_info.ticeanshi }}</span>
                </el-form-item> -->
                <el-form-item label="是否按时准入">
                  <!-- <el-input
                    v-model="sizeForm.project_info.ticeanshi"
                    class="buginput"
                    placeholder=""
                  /> -->
                  <el-switch
                    v-model="sizeForm.project_info.ticeanshi"
                    style="margin-right:20px"
                    active-color="#13ce66"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="准入次数">
                  <span class="info_span">{{ sizeForm.project_info.zhunru }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <!-- <el-form-item label="是否按时准出">
                  <span class="info_span">{{ sizeForm.project_info.zhunchuanshi }}</span>
                </el-form-item> -->
                <el-form-item label="是否按时准出">
                  <!-- <el-input
                    v-model="sizeForm.project_info.zhunchuanshi"
                    class="buginput"
                    placeholder=""
                  /> -->
                  <el-switch
                    v-model="sizeForm.project_info.zhunchuanshi"
                    style="margin-right: 20px"
                    active-color="#13ce66"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="准出次数">
                  <span class="info_span">{{ sizeForm.project_info.zhunchu }}</span>
                </el-form-item>
              </el-col>

            </el-row>
            <el-row :gutter="10">
              <el-col :span="24">
                <div class="mark">
                  <span style="font-size:15px;font-weight:bold;margin-left:10px" class="mark-item">bug数据</span>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="10">
              <el-col :span="4">
                <el-form-item label="本版本遗留">
                  <span class="info_span">{{ sizeForm.project_info.bug_Legacy.nofix_bug }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="之前版本遗留">
                  <span class="info_span">{{ sizeForm.project_info.bug_Legacy.ago }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="Bug总数">
                  <span class="info_span">{{ sizeForm.project_info.bug_Legacy.sum_bug }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="用户体验类">
                  <span class="info_span">{{ sizeForm.project_info.pm_bug.use_bug }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="需求变更">
                  <span class="info_span">{{ sizeForm.project_info.pm_bug.pm_fix }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="Reopen">
                  <span class="info_span">{{ sizeForm.project_info.mantis.reopen }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="10">
              <el-col :span="4">
                <el-form-item label="Smoke_Bug">
                  <span class="info_span">{{ sizeForm.project_info.smoke_bug }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="首轮bug数">
                  <span class="info_span">{{ sizeForm.project_info.frist_bug }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="3">
                <el-form-item label="P1">
                  <span class="info_span">{{ sizeForm.project_info.mantis.P1 }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="3">
                <el-form-item label="P2">
                  <span class="info_span">{{ sizeForm.project_info.mantis.P2 }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="3">
                <el-form-item label="P3">
                  <span class="info_span">{{ sizeForm.project_info.mantis.P3 }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="3">
                <el-form-item label="P4">
                  <span class="info_span">{{ sizeForm.project_info.mantis.P4 }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="3">
                <el-form-item label="P5">
                  <span class="info_span">{{ sizeForm.project_info.mantis.P5 }}</span>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>

          <el-col :span="9">
            <el-row :gutter="10">
              <el-col :span="24">
                <div class="mark">
                  <span style="font-size:15px;font-weight:bold;margin-left:10px" class="mark-item">项目备注</span>

                </div>
              </el-col>
            </el-row>
            <!--            <el-row :gutter="10">-->
            <!--              <el-col :span="24">-->
            <!--                <el-input-->
            <!--                  v-model="sizeForm.pquest"-->
            <!--                  type="textarea"-->
            <!--                  :rows="5"-->
            <!--                  placeholder="项目问题"-->
            <!--                />-->
            <!--              </el-col>-->
            <!--            </el-row>-->
            <div class="sizeFormTextarea">
              <el-row style="margin-top: 5%" :gutter="10">
                <el-col :span="23">
                  <el-form-item label="项目问题">
                    <!-- <span class="info_span">{{ sizeForm.pquest }}</span> -->
                    <el-input
                      v-model="sizeForm.pquest"
                      type="textarea"
                      :rows="5"
                      placeholder="项目问题"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <!--              <el-col :span="20">-->
              <!--                <span class="info_span">{{ sizeForm.pquest }}</span>-->
              <!--              </el-col>-->
              <!--            </el-row>-->
              <el-row style="margin-top: 5%" :gutter="10">
                <el-col :span="23">
                  <el-form-item label="备注说明">
                    <!-- <span class="info_span">{{ sizeForm.remark }}</span> -->
                    <el-input
                      v-model="sizeForm.remark"
                      type="textarea"
                      :rows="5"

                      placeholder="备注说明"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
            </div>

          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { getProject } from '@/api/quality'
import { Message } from 'element-ui'

export default {
  name: 'Details',
  props: {
    // dialogAdd: Object,
    proInfo: {
      type: Object,
      required: true
    },
    modal: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      statusOptions: [
        { value: 1, label: '测试中' },
        { value: 2, label: '测试完成' },
        { value: 3, label: '已上线' }
      ],
      demandOptions: [
        { value: 1, label: '标准需求' },
        { value: 2, label: '验收需求' },
        { value: 3, label: '生产事故' },
        { value: 4, label: '线上bug' },
        { value: 5, label: '紧急发版' }
      ],
      listLoading: false,
      sizeForm: {
        'textarea': '',
        'pro_data': {
          'v_group': '',
          'v_project': '',
          'v_version': '',
          'm_group': '',
          'm_project': '',
          'm_version': ''
        },
        'project_info': {
          'project_name': '',
          'version': '',
          'demand_type': '',
          'status': '',
          'start_time': '',
          'end_time': '',
          'online_time': '',
          'pro_id': '',
          'mantis': { 'P1': '', 'P2': '', 'P3': '', 'P4': '', 'P5': '', 'reopen': '' },
          'tice': '', 'ticeanshi': '', 'zhunru': '', 'zhunchu': '', 'zhunchuanshi': '', 'cheack': '', 'smock_bug': '', 'frist_bug': '', 'dd': '',
          'bug_Legacy': { 'nofix_bug': '', 'sum_bug': '', 'ago': '' },
          'pm_bug': { 'use_bug': '', 'pm_fix': '' },
          'dev_time': '',
          'online': { 'online_status': false, 'onlineanshi': false, 'online_count': '', 'back': '' },
          'bug_sum': ''
        },
        'quality_data': {},
        'relation': false
      }
    }
  },
  mounted() {
    this.get_Project()
    console.log(this.modal)
  },
  methods: {
    get_Project() {
      if (this.proInfo.pid !== '') {
        getProject(this.proInfo.pid)
          .then((res) => {
            this.sizeForm = res.data
          })
          .catch((error) => {
            Message.error(error.msg || error.message || error.value)
          })
      }
    },
    callOf() {
      this.$emit('closePop')
    }
  }
}
</script>
<style scoped>
.info_span {
  /*font-weight: bold;*/
  font-size: 16px;
  /*background-color: #bfb8b8;*/
}
.mark {
  border-radius: 4px;
  margin: 10px 0 30px;
  background-color: rgba(175, 196, 225, 0.8);
  height: 30px;
  line-height: 30px;
  color: #fff;
}
/deep/.sizeFormTextarea textarea{
  color: #000 !important;
}
</style>

